<template>
    <el-dialog :visible.sync="dialogVisible" @close="close" width="80%">
        <el-form :model="queryForm" ref="queryForm" label-width="80px">
            <h4>添加</h4>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="资产名称" prop="assetName">
                        <el-input v-model="queryForm.assetName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="资产编码" prop="number">
                        <el-input v-model="queryForm.number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="资产分类" prop="assetCategoryId">
                        <el-select v-model="queryForm.assetCategoryId" placeholder="请选择" @focus="fetchCategories">
                            <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="16">
                <el-col :span="16">
                    <el-form-item label="存放位置" prop="locationId">
                        <el-input v-model="queryForm.locationId"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="4">
                <el-col :span="2">
                    <el-button type="primary" @click="submitQuery">查询</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button @click="resetQuery">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
            <el-table-column prop="assetName" label="资产名称" width="160"></el-table-column>
            <el-table-column prop="number" label="资产编码" width="180"/>
            <el-table-column prop="model" label="规格型号" width="180"/>
            <el-table-column prop="kind" label="资产分类" />
            <el-table-column prop="unit" label="单位" />
            <el-table-column prop="adminName" label="管理人" />
            <el-table-column prop="userName" label="使用人" />
            <el-table-column prop="nowLocation" label="存放地点" width="180"/>
        </el-table>
        <el-row>
            <span>已选择{{ selectionCount }}项</span>
        </el-row>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[7, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
        <!-- 弹层内容 -->
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
    </el-dialog>
    </template>
    
        
    <script>
    import assetAllocateApi from '@/api/asset-allocate';
    import { assetCategory } from '@/api/assetCategory';
    
    export default {
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dialogVisible: true,
                selectionCount: 0, // 统计选择了几项
                categories: [],
                assetIds: [],
                queryForm: {
                    assetName: '',
                    number: '',
                    assetCategoryId: '',
                    locationId: ''
                }
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            indexMethod(index) {
                return (index + 1) + (this.currentPage - 1) * this.pageSize; // 返回从1开始的索引
            },
            fetchData() {
                assetAllocateApi.findAllocateFixed({
                        page: this.currentPage,
                        limit: this.pageSize
                    })
                    .then(response => {
                        this.tableData = response.data
                        this.total = response.count
                    })
                    .catch(error => console.log(error))
            },
            handleSelectionChange(selection) {
                this.selectionCount = selection.length
                this.assetIds = selection.map(item => item.id)
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize
                this.fetchData()
            },
            handleCurrentChange(newPage) {
                this.currentPage = newPage
                this.fetchData()
            },
            submitQuery() {
                // 提交查询逻辑
                assetAllocateApi.findAllocateFixed({
                        page: this.currentPage,
                        limit: this.pageSize,
                        ...this.queryForm // 使用扩展运算符传递整个 queryForm 对象
                    })
                    .then(response => this.tableData = response.data)
                    .catch(error => console.log(error))
            },
            resetQuery() {
                this.$refs['queryForm'].resetFields();
            },
            exportData() {
    
            },
            close() {
                this.cancel()
                this.confirm()
            },
            cancel() {
                this.dialogVisible = false;
                this.assetIds = []
                this.$emit('close'); // 触发 close 事件，通知父组件关闭弹层
            },
            confirm() {
                this.dialogVisible = false;
                // 当用户点击提交按钮时，发射一个事件，并传递数据
                this.$emit('data-submitted', this.assetIds);
                this.$emit('close'); // 触发 close 事件，通知父组件关闭弹层
            },
            fetchCategories() {
                assetCategory.findAll()
                    .then(response => this.categories = response.data)
                    .catch(error => console.log(error))
            },
            formatStatus(row, column, cellValue) {
                // 根据assetStatus的值来返回不同的文本
                if (cellValue === 2) {
                    return '闲置';
                }
                // 默认返回原始值或其他文本
                return '数据有误！';
            }
    
        }
    }
    </script>
    